<template>
  <div class="www">
    
    <el-row class="mb-4">
      <el-col :span="2" :offset="10">
        <h2>用户登录</h2>
        <p>{{ username,password }}</p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="9">
        <el-form label-position="left" label-width="100px" style="max-width: 460px">

          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="username" />
          </el-form-item>

          <el-form-item label="密码">
            <el-input @keyup.enter="login(username, password)" placeholder="请输入用密码" v-model="password"
              type="password" show-password autocomplete="off" />
          </el-form-item>

          <!-- <el-button type="primary" @click.prevent="login(username, password)">登录</el-button> -->
          <el-button type="primary" @click="login(username, password)">登录</el-button>

        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import api from "../../api"
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus"
const router = useRouter()
const username = ref("")
const password = ref("")
function login(user, pwd){
  api.login(user, pwd).then(res => {
    ElMessage({
          message: res.data.msg,
          type: res.data.type,
          center: true
        });
        if (res.data.type === 'success') {
          // localStorage.setItem('auth', res.data)
          localStorage.setItem('auth', JSON.stringify(res.data.data))
          // this.$router.push('/index')
          router.push('/index')
        } else {
          // localStorage.removeItem('token')
          localStorage.removeItem('auth')
        }
  })
}
function getu(){
  api.getUsers().then(res => {
    console.log(res);
  })
}
onMounted(() => {
  if (localStorage.getItem('auth')) {
      router.push('/index')
    } else {
      router.push('/login')
    }
})
</script>
<!-- 
<script>
export default {
  name: 'login',
  data() {
    return {
      user: {
        "username": '',
        "password": ''
      },
    }
  },
  mounted() {
    if (localStorage.getItem('auth')) {
      this.$router.push('/index')
    } else {
      this.$router.push('/login')
    }
  },
  methods: {
    login(user, pwd) {
      this.$http.post('/api/CreateToken/', { 'user': user, 'pwd': pwd }).then((response) => {
        this.$message({
          message: response.data.msg,
          type: response.data.type,
          center: true
        });
        if (response.data.type === 'success') {
          // localStorage.setItem('token', response.data.token)
          localStorage.setItem('auth', JSON.stringify(response.data))
          this.$router.push('/index')
        } else {
          // localStorage.removeItem('token')
          localStorage.removeItem('auth')
        }
      });
    },
  },
}
</script> -->

<style scoped>
/* page {
  background-color: red;
} */

.www {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}
</style>